<eda-dialog2 [display]="display" [header]="dialogHeader" width="80vw" height="90vh" (apply)="onApply()"
    (close)="onClose()">

    <div content>
        <div class="row">
            <div class="col-9">
                <p-card *ngIf="formReady && !globalFilter.isdeleted" [header]="header3" id="anywhereClick">
                    <div class="row">
                        <div class="col-3">
                            <p-dropdown id="selectFilerTable" [options]="tables"
                                [(ngModel)]="globalFilter.selectedTable" filter="true"
                                optionLabel="display_name.default" [style]="{'width': '100%'}"
                                i18n-placeholder="@@placeholderTables" placeholder="Entidades"
                                (onChange)="onChangeSelectedTable()" appendTo="body">
                            </p-dropdown>
                        </div>
                        <div class="col-3">
                            <p-dropdown id="selectFilterColumn" [options]="columns"
                                [(ngModel)]="globalFilter.selectedColumn" filter="true"
                                optionLabel="display_name.default" [style]="{'width': '100%'}"
                                i18n-placeholder="@@placeholderColumns" placeholder="Atributos"
                                (onChange)="onChangeSelectedColumn()" appendTo="body">
                            </p-dropdown>
                        </div>
                        <div class="col-3" >
                            <input class = "d-flex justify-content-center" type="text" pInputText id="aliasName"
                            [style]="{'vertical-align' : 'bottom', width: '100%' }"
                            [(ngModel)]="aliasValue"  
                            placeholder="Alias del filtro (opcional)"
                            i18n-placeholder="@@aliasValuePh">
                        </div>
                        <div class="col-3">
                            <p-multiSelect id="selectFilterValue" class='eda-filter-multiselect'
                                *ngIf="globalFilter.selectedColumn?.column_type !== 'date'" [options]="columnValues"
                                [(ngModel)]="globalFilter.selectedItems" [virtualScroll]="true" itemSize="30"
                                [style]="{'vertical-align' : 'bottom', 'margin-left' : '15px', width: '100%' }"
                                [panelStyle]="{minWidth:'15em'}" maxSelectedLabels="1" defaultLabel="Valor por defecto"
                                display="chip" appendTo="body">
                            </p-multiSelect>

                            <eda-date-picker #myCalendar
                                *ngIf="globalFilter.selectedColumn?.column_type === 'date'"
                                [inject]="datePickerConfigs[selectedFilter?.id]"
                                [autoClear]="true" (onDatesChanges)="processPickerEvent($event)">
                            </eda-date-picker>
                        </div>
                    </div>
                </p-card>
            </div>
            <div class="col-3">
                <p-card *ngIf="formReady && !globalFilter.isdeleted" [header]="header4" id="anywhereClick">
                    <div class="row">
                        <div class="col-12">
                            <p-dropdown id="applyToOneFilterDropdown" i18n-title="@@filterVisibleScope"
                                title="Definir la visibilidad del filtro. Público: todos pueden usarlo.  Deshabilitado: El resto de usuarios pueden ver el filtro pero no pueden modificarlo.  Oculto: El resto de usuarios no pueden ver el filtro, pero se les aplica"
                                [options]="publicRoHidden" [(ngModel)]="globalFilter.visible"
                                [style]="{'width': '100%'}" selected="publicRoHiddenOption" autoWidth="false">
                            </p-dropdown>
                        </div>
                    </div>
                </p-card>
            </div>
        </div>



        <div class="row">
            <div *ngIf="!isEmpty(globalFilter.selectedTable) && !isEmpty(globalFilter.selectedColumn)" class="col-12">
                <p-card *ngIf="formReady && !globalFilter.isdeleted" [header]="header2" id="anywhereClick">
                    <p-table [value]="allPanels">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width: 40%;">Panel</th>
                                <th style="width: 60%;">Ruta del filtro</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-panel>
                            <tr>
                                <td style="width: 40%;">
                                    <button type="button" pButton class="ui-button" [label]="panel.title"
                                        [style]="{'width': '70%'}" (click)="onAddPanelForFilter(panel)"
                                        [ngClass]="{'ui-button-selected': panel.active, 'ui-button-unselected':!panel.active, 'ui-button-unvaliable':!panel.avaliable}">
                                    </button>
                                </td>
                                <td style="width: 60%;">
                                    <p-treeSelect *ngIf="globalFilter.pathList[panel.id]" 
                                        [(ngModel)]="globalFilter.pathList[panel.id].selectedTableNodes"
                                        [options]="panel.content.globalFilterPaths"
                                        (onNodeExpand)="onNodeExpand(panel, $event)"
                                        (onNodeSelect)="onNodeSelect(panel, $event)" appendTo="body"
                                        [disabled]="!panel.active || !panel.avaliable">

                                        <ng-template pTemplate="value">
                                            <span class="d-flex align-items-center" [innerHTML]="getDisplayPathStr(globalFilter.pathList[panel.id].selectedTableNodes)"></span>
                                        </ng-template>

                                        <ng-template let-node pTemplate="child">
                                            <span [ngClass]="checkNodeSelected(globalFilter.pathList[panel.id].selectedTableNodes, node) ? 'font-weight-bold' : ''"> {{node.label}} </span>
                                        </ng-template>

                                        <ng-template let-node pTemplate="default">
                                            <b>{{node.label}}</b>
                                        </ng-template>
                                    </p-treeSelect>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>

                    <div class="row">
                        <div class="col-12">
                            <span style="margin: 0.5rem;" class="dotgreen"></span>
                            <span style="margin-right: 2rem;">{{greendot}}</span>

                            <span style="margin: 0.5rem;" class="dotred"></span>
                            <span style="margin-right: 2rem;">{{reddot}}</span>

                            <span style="margin: 0.5rem;" class="dotunselected"></span>
                            <span style="margin-right: 2rem;">{{unselecteddot}}</span>
                        </div>
                    </div>
                </p-card>

                <!-- <div *ngIf="isEmpty(globalFilter.selectedTable) || isEmpty(globalFilter.selectedColumn)" class="disabled-div"></div> -->
            </div>

        </div>

        <div class="row">
            <div class="col-12">
                <p-card *ngIf="formReady" [header]="posicion">
                    <div cdkDropList cdkDropListOrientation="horizontal" class="select-list"
                        [cdkDropListData]="globalFilterList" (cdkDropListDropped)="onReorderFilter($event)">
                        <ng-container *ngFor="let filter of globalFilterList">
                            <div *ngIf="!filter.isdeleted" class="select-box col-3 col-md-2 p-1" cdkDrag>
                                <span class="close-thin pointer" (click)="removeFilter(filter, 'select')"></span>
                                <!-- [ngClass]="(selectedFilter.table==filter.table) && (selectedFilter.column.label==filter.column.label)?'edaEmfasis':''" -->
                                <span class="text-center">
                                    {{getFilterLabel(filter)}}
                                </span>
                            </div>
                        </ng-container>
                    </div>
                </p-card>
            </div>
        </div>
    </div>
</eda-dialog2>